<template>
    <div class="echart" ref='echarts'>
        <ul>
            <li>
                <h3 class='title'>
                    <span>年龄结构</span>
                    <span>
                        <i class="fa fa-minus"></i>
                        <i class="fa fa-times"></i>
                    </span>
                </h3>
                <div id='content1' style='width:528.16px;height:420px'></div>
            </li>
             <li>
                <h3 class='title'>
                    <span>学历结构</span>
                    <span>
                        <i class="fa fa-minus"></i>
                        <i class="fa fa-times"></i>
                    </span>
                </h3>
                <div id='content2' style='width:528.16px;height:420px'></div>
            </li>
             <li>
                <h3 class='title'>
                    <span>性别分布</span>
                    <span>
                        <i class="fa fa-minus"></i>
                        <i class="fa fa-times"></i>
                    </span>
                </h3>
                <div id='content3' style='width:528.16px;height:420px'></div>
            </li>
        </ul>
    </div>
</template>

<script>
import echarts from "echarts";

export default {
  props: ["res"],

  mounted() {
    if (this.$refs.echarts) {
      let ageData = [
        {
          value: this.res.info.thirtybelowcount,
          name:
            "50岁以上人数：" +
            this.res.info.thirtybelowcount +
            "人(" +
            this.res.info.fiftyabovescale +
            ")"
        },
        {
          value: this.res.info.fortytofiftycount,
          name:
            "40岁到50岁人数：" +
            this.res.info.fortytofiftycount +
            "人(" +
            this.res.info.fortytofiftyscale +
            ")"
        },
        {
          value: this.res.info.thirtytofortycount,
          name:
            "30岁到40岁人数：" +
            this.res.info.thirtytofortycount +
            "人(" +
            this.res.info.thirtytofortyscale +
            ")"
        },
        {
          value: this.res.info.thirtybelowcount,
          name:
            "30岁以下人数：" +
            this.res.info.thirtybelowcount +
            "人(" +
            this.res.info.thirtybelowscale +
            ")"
        }
      ];

      let educationData = [
        {
          value: this.res.education[0].educount,
         name:`${this.res.education[0].highest_edu||'未填写'}:${this.res.education[0].educount}(${this.res.education[0].eduscale})`
        },{
          value: this.res.education[1].educount,
          name:`${this.res.education[1].highest_edu||'未填写'}:${this.res.education[1].educount}(${this.res.education[1].eduscale})`
        }
      ];

      let sexData = [
         {
          value: this.res.info.boycount,
         name:`男:${this.res.info.boycount}(${this.res.info.boyscale})`
        },{
          value: this.res.info.grilcount,
          name:`女:${this.res.info.grilcount}(${this.res.info.grilscale})`
        },{
          value: this.res.info.othercount,
          name:`未知:${this.res.info.othercount}(${this.res.info.otherscale})`
        }
      ]
   
  
      this.$nextTick(function() {
        this.drawPie("#content1", ageData,'年龄分布','60%');
      });

       this.$nextTick(function() {
        this.drawPie("#content2", educationData,'学历结构',['50%','70%']);
      });

       this.$nextTick(function() {
        this.drawPie("#content3", sexData,'性别分布','60%',true);
      });
    }
  },

  methods: {
    drawPie(id, datas,name,type,showFlag) {
      this.charts = echarts.init(this.$refs.echarts.querySelector(id));
      this.charts.setOption({

        tooltip: {
          trigger: "item",
          formatter: "{b}"
        },

        legend: {
          show:showFlag,
          x: 'left',
          left:'15px',
          top:'10px',
          data:datas,
          formatter: function(val) {
            return val.split(':')[0];
          }
        },
        series: [
          {
            name: name,
            type: "pie",
            radius:type,
            center: ["50%", "50%"],
            data: datas,

            label: {
              normal: {
                show: true,
                formatter: function(val) {
                  return val.name.split("：").join("\n");
                }
              }
            },

            labelLine: {
              normal: {
                lengh: 30,
                length2: 30
              }
            }
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.echart {
  margin-top: 20px;
  overflow: hidden;
}

.echart ul {
  overflow: hidden;
}
.echart li {
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: #00a65a;
  width: 48.5%;
  float: left;
  margin-bottom: 30px;
  background-color: #fff;
}

.echart li:nth-of-type(2n-1) {
  margin-right: 32px;
}

.echart .title {
  border-bottom: 1px solid #f1f1f1;
  line-height: 40px;
  overflow: hidden;
  padding: 0 10px;
}

.echart .title span:first-of-type {
  font-size: 18px;
  font-family: "Microsoft YaHei", museo-slab, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  color: rgb(68, 68, 68);
  font-weight: normal;
  float: left;
}

.echart .title span:last-of-type {
  font-size: 14px;
  font-family: "Microsoft YaHei", museo-slab, "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  color: rgb(151, 160, 179);
  font-weight: normal;
  float: right;
}

.echart .title span:last-of-type i {
  margin-left: 10px;
}

.echart ul li .content {
}
</style>